<template>
	<div>
		<ul class="steps">
			<li :class="current >= 0 ? 'active' : ''">{{ $t('ivcs.baseinfo') }}</li>
			<li :class="current >= 1 ? 'active' : ''">{{ $t('ivcs.selfsubmit') }}</li>
			<li :class="current >= 2 ? 'active' : ''">{{ $t('ivcs.videoagent') }}</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'MyStep',
	props: ['current']
};
</script>

<style scoped>
/* 进度条 */
/* 创建步骤数字计数器 */
.steps {
	position: relative;
	/*margin-bottom: 30px;*/
	counter-reset: step;
	background: #fff;
	/*margin :5px 0;*/
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	/*margin-left: -46px;*/
}

/* 步骤描述 */
.steps li {
	list-style-type: none;
	font-size: 14px;
	text-align: center;
	width: 33%;
	position: relative;
	float: left;
	/*height:80px;*/
	/*line-height :80px;*/
	padding: 10px 0;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFangSC;
	color: rgba(102, 102, 102, 1);
}
/* 步骤数字 */
.steps li:before {
	display: block;
	content: counter(step); /* 设定计数器内容 */
	counter-increment: step; /* 计数器值递增 */
	width: 10px;
	height: 10px;
	background-color: #ccc;
	line-height: 10px;
	border-radius: 10px;
	font-size: 0;
	color: #fff;
	text-align: center;
	/*font-weight: 600;*/
	margin: 0 auto 9px auto;
}

/* 连接线 */
.steps li ~ li:after {
	content: '';
	width: 100%;
	height: 3px;
	background-color: #ccc;
	position: absolute;
	left: -46%;
	top: 14px;
	z-index: 0;
}
/* 将当前/完成步骤之前的数字及连接线变绿 */
.steps li.active:before,
.steps li.active:after {
	/*background-color:#6fb1bd;*/
	background: rgba(100, 202, 171, 1);
	/*font-size:12px;*/
	/*font-family:PingFangSC-Regular,PingFangSC;*/
	/*font-weight:400;*/
	/*color:rgba(102,102,102,1);*/
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	width: 80%;
	/*height: 0px;*/
	margin-left: 10%;
	background-color: yellow;
}

.rowline {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 50%;
}

.circle {
	width: 20px;
	height: 20px;
	background: rgba(100, 202, 171, 1);
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	/*margin-left: 15%;*/
}

.line {
	background: rgba(233, 233, 233, 1);
	/*width: 100px;*/
	width: 80%;
	height: 3px;
}

.title {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFangSC;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
	width: 100%;
	text-align: left;
	margin-left: -25%;
}
</style>
